<template>
  <view class="template-selected-goods">
    <PublicPage pageName="已使用商品">
      <view class="top-tip">以下商品正在使用运费模板“{{routeData.name||''}}”</view>
      <!-- @interrupt="interrupt" -->
      <ScrollList
          ref="scrollView"
          :scrollAnimation="false"
          :minusHeight="36"
          noTop
          @scrolltolower="scrolltolower"
      >
        <template slot="content">
          <view class="goods-list">
            <view v-for="(item, index) in goodsList" :key="index" class="goods-item">
              <view class="item-lf">
                <image :src="item.mainImage" lazy-load mode="aspectFill" class="cover-image" />
              </view>
              <view class="item-rt">
                <view class="rt-top">{{item.goodsName}}</view>
                <view class="rt-bottom">
                  <button v-if="item.hasChange" class="button1">已更换</button>
                  <button v-else class="button2" @click="changeTemplate(item)">更换运费模板</button>
                </view>
              </view>
            </view>
          </view>
        </template>
      </ScrollList>
    </PublicPage>
    <!-- 选择物流模板弹窗 -->
    <u-popup
        v-model="dlModel"
        :closeable="true"
        height="60%"
        mode="bottom"
        border-radius="24"
        safe-area-inset-bottom
        @close="closePopup"
    >
      <view class="template-popup">
        <view class="title">选择运费模板</view>
        <scroll-view scroll-y class="template_scroll">
          <view class="template_list">
            <view v-for="(item,index) in freightList" :key="index" class="template-item" @click="selectedTemplate(item)">
              <view
                  class="iconfont icon_select"
                  :class="{
                     'icon-checkbox': item.templateId!==selIndex,
                     'icon-checkbox_fill': item.templateId===selIndex
                 }"
              ></view>
              <view class="u-flex-1 name">{{item.name}}</view>
            </view>
          </view>
        </scroll-view>
        <view class="template-footer">
          <button
              class="button"
              :class="{
                'disabled-button': routeData.templateId === selIndex
              }"
              @click="onSubmit"
          >确认选择</button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import PublicPage from '@/components/publicPage/index.vue'
import ScrollList from '@/components/scrollList/index.vue'
import freightApi from '@/api/freight.js'
export default {
  name: 'selectedGoods',
  components: {
    PublicPage,
    ScrollList
  },
  data() {
    return {
      routeData: {},
      goodsList: [],
      freightList: [], // 运费模板列表
      dlModel: false,
      page: {
        currentPage: 1,
        pageSize: 10
      },
      listMore: true,
      listLoading: true,
      selIndex: 0,
      spuId: ''
    }
  },
  onLoad(option) {
    this.routeData = option
    if (option.templateId && option.templateId !== 'undefined') {
      this.selIndex = option.templateId
    }
  },
  onShow() {
    this.getFTGoods()
  },
  methods: {
    getFTGoods() {
      freightApi.getTemplateGoods({ ...this.page, templateId: this.routeData.templateId }).then(({ data }) => {
        if (this.page.currentPage === 1) {
          this.goodsList = data.records || []
        } else {
          this.goodsList = this.goodsList.concat(data.records)
        }

        if ((this.page.currentPage * this.page.pageSize) !== this.goodsList.length) {
          // 无更多数据标识
          this.listMore = false
          let time = 1000
          if (this.page.currentPage === 1) time = 0
          this.$refs.scrollView && this.$refs.scrollView.loadFinish(3, time)
        }

      })
    },
    getFreightList() {
      freightApi.freightList().then(res => {
        if (res.code === 200) {
          this.freightList = res.data || []
          this.freightList.unshift({name: '全国包邮', templateId: 0})
        }
      })
    },
    changeTemplate(row) {
      this.spuId = row.spuId
      this.getFreightList()
      this.dlModel = true
    },
    selectedTemplate(row) {
      this.selIndex = row.templateId
    },
    closePopup() {
      this.spuId = ''
      this.dlModel = false
      // setTimeout(() => {
      //   this.selIndex = 0
      // },250)
    },
    onSubmit() {
      if (this.selIndex !== this.routeData.templateId &&this.spuId) {
        freightApi.updateSpuFreight({ templateId: this.selIndex, spuId: this.spuId }).then(res => {
          if (res.code === 200) {
            uni.showToast({
              title: '更换成功',
              icon: 'none',
              duration: 2000
            })
            for (let i = 0, length = this.goodsList.length; i < length; i++) {
              const row = this.goodsList[i]
              if (row.spuId === this.spuId) {
                this.$set(row, 'hasChange', true)
                break
              }
            }
            this.spuId = ''
            this.dlModel = false
          }
        })
      }
    },
    // interrupt() {
    //   this.listMore = true
    //   this.page.currentPage = 1
    //   this.getFTGoods()
    //   setTimeout(() => {
    //     this.$refs.scrollView && this.$refs.scrollView.refreshFinish()
    //   },400)
    // },
    scrolltolower() {
      ++this.page.currentPage
      this.getFTGoods()
      this.$refs.scrollView && this.$refs.scrollView.loadFinish(this.listMore ? 0 : 3)
    }
  }
}
</script>

<style lang="scss" scoped>
.template-selected-goods {
  .top-tip {
    width: 100%;
    height: 72rpx;
    padding: 0 32rpx;
    font-size: 24rpx;
    line-height: 72rpx;
    color: #ED6A0C;
    background: #FFFBE8;
  }
  .goods-list {
    padding: 32rpx 32rpx 0;
  }
  .goods-item {
    display: flex;
    padding: 20rpx 24rpx;
    margin-bottom: 24rpx;
    background: #FFFFFF;
    box-shadow: 0 4rpx 24rpx rgba(150, 151, 153, 0.16);
    border-radius: 16rpx;
  }
  .item-lf {
    width: 160rpx;
    height: 160rpx;
    margin-right: 16rpx;
    border-radius: 4rpx;
    overflow: hidden;
    .cover-image {
      width: 100%;
      height: 100%;
    }
  }
  .item-rt {
    flex: 1;
    .rt-top {
      height: 80rpx;
      margin-bottom: 32rpx;
      font-size: 28rpx;
      @include bov(2);
      color: $n8Color;
    }
    .button1 {
      float: right;
      width: 104rpx;
      height: 48rpx;
      line-height: 48rpx;
      border-radius: 32rpx;
      font-size: 24rpx;
      background: $n2Color;
      color: $n8Color;
    }
    .button2 {
      float: right;
      width: 176rpx;
      height: 48rpx;
      line-height: 44rpx;
      border-radius: 32rpx;
      font-size: 24rpx;
      border: 2rpx solid $themeColor;
      color: $themeColor;
      background: #ffffff;
    }
  }
  .template-popup {
    height: 100%;
    .title {
      width: 100%;
      height: 96rpx;
      text-align: center;
      line-height: 96rpx;
      font-size: 32rpx;
      font-weight: 500;
      color: $n8Color;
    }
    .template_scroll {
      height: calc(100% - 192rpx);
    }
    .template-footer {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
    }
    .button {
      height: 96rpx;
      line-height: 96rpx;
      font-size: 32rpx;
      border-radius: 0;
      text-align: center;
      background-color: $themeColor;
      color: #FFFFFF;
    }
    .disabled-button {
      background-color: #FFE5DE;
    }
    .template_list {
      padding: 16rpx 32rpx 0;
    }
    .template-item {
      display: flex;
      height: 104rpx;
      padding: 0 32rpx;
      line-height: 104rpx;
      margin: 0 0 16rpx 0;
      border-radius: 16rpx;
      font-size: 28rpx;
      background: $n1Color;
    }
    .icon_select {
      width: 40rpx;
      margin-right: 16rpx;
      font-size: 40rpx;
    }
    .icon-checkbox {
      color: $n6Color;
    }
    .icon-checkbox_fill {
      color: $themeColor;
    }
    .name {
      color: $n8Color;
      @include bov(1);
    }
  }
  .scroll_view {
    height: calc(100% - 196rpx);
  }
  .popup_btn_box {
    position: absolute;
    left: 0;
    bottom: 0;
  }
}
</style>